<template>
  <div style="width: 100%;">
    <el-cascader
      filterable
      clearable
      placeholder="试试搜索：手机"
      v-model="paths"
      :options="categorys"
      :props="setting"
      style="width: 100%;"
    ></el-cascader>
  </div>
</template>

<script>

import { list } from "@/api/goods/category";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //接受父组件传来的值
  props: {
    catelogPath: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  data() {
    //这里存放数据
    return {
      setting: {
        value: "catId",
        label: "name",
        children: "children"
      },
      categorys: [],
      paths: this.catelogPath
    };
  },
  watch:{
    catelogPath(v){
      this.paths = this.catelogPath;
    },
    paths(v){
      if(this.paths.length === 0){
        this.$emit("update:catelogPath",v)
        this.$emit("catPath",[''])
      }else{
        this.$emit("update:catelogPath",v)
        //还可以使用pubsub-js进行传值
        // this.PubSub.publish("catPath",v)
        this.$emit("catPath",v)
      }

    }
  },
  //方法集合
  methods: {
    getCategorys() {
      list()
        .then(request => {
          this.categorys = request.data
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCategorys();
  }
};
</script>
